<template>
    <div>
        <el-select
            v-model="data_value"
            :size="size"
            :clearable="clearable"
            :filterable="filterable"
            :placeholder="placeholder"
            @change="change"
        >
            <el-option
                v-for="item in data"
                :key="item.ckey"
                :label="item.label"
                :value="item.cvalue"
            ></el-option>
        </el-select>
    </div>
</template>

<script>
export default {
    name: 'SelectPanel',
    props: {
        size: {
            type: String,
            default: 'small'
        },
        placeholder: {
            type: String,
            default: ''
        },
        data: {
            type: Array,
            required: true
        },
        label: {
            type: String,
            default: 'name'
        },
        clearable: {
            type: Boolean,
            default: true
        },
        filterable: {
            type: Boolean,
            default: true
        },
        ckey: {
            type: String,
            default: 'id'
        },
        cvalue: {
            type: String,
            default: 'id'
        },

        value: null
    },
    data() {
        return {
            data_value: null
        }
    },
    watch: {
        value: {
            handler(val) {
                this.data_value = val
            },
            immediate: true
        }
    },
    methods: {
        change(val) {
            this.$emit('input', val)
        }
    }
}
</script>

<!--<style scoped>-->

<!--</style>-->
